<template>
  <view>
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      title="虚拟试衣间"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <view class="show-box">
      <view class="left-box">
        <view class="show-content">
          <image mode="widthFix" :src="resultUrl" class="img-result"></image>
          <view class="switch-box" @click="switchImage()" v-if="showSwitchBar">
            <view class="iconfont icon-switch"></view>
            <view class="switch-tips">{{
              resultUrl ? '切换形象' : '选择形象'
            }}</view>
          </view>
        </view>
      </view>
      <view class="cloth-params">
        <view class="params-title">配置衣服的参数</view>
        <view>
          <form>
            <view class="input-box" @click="showHeightPicker()">
              <view class="iconfont icon-height">身高:</view>
              <view>{{
                heightList.length ? heightList[heightIndex].item : ''
              }}</view>
            </view>
            <view class="input-box" @click="showWaistPicker()">
              <view class="iconfont icon-waist" @click="showWaistPicker"
                >腰围:</view
              >
              <view>{{
                waistList.length ? waistList[waistIndex].item : ''
              }}</view>
            </view>
            <view class="input-box">
              <view style="color: #1a73e8">推荐尺寸:</view>
              <view style="color: #1a73e8">{{
                sizeList.length > 0 ? sizeList[sizeIndex].item + '码' : ''
              }}</view>
            </view>
            <view class="input-box" @click="showColorPicker()">
              <view class="iconfont icon-color">颜色:</view>
              <view>{{
                colorList.length > 0 ? colorList[colorIndex].item : ''
              }}</view>
            </view>
          </form>
          <view class="params-tips">单位：厘米（cm）</view>
          <view class="btn-box" v-if="currentClothIndex > -1">
            <u-button @click="addToList" type="success" :ripple="true"
              >加入列表</u-button
            >
          </view>
        </view>
        <u-picker
          mode="selector"
          v-model="showPicker"
          @confirm="changeSize()"
          :default-selector="[0]"
          :range="rangeList"
          range-key="item"
        ></u-picker>
      </view>
    </view>
    <view class="virtual-list-box">
      <view class="virtual-list-title-box">
        <view class="virtual-list-title">试衣列表</view>
        <view
          @click="clearAllCloth"
          class="iconfont icon-clear"
          style="color: #afb4ca"
          >清空</view
        >
      </view>
      <scroll-view scroll-x="true">
        <view style="display: flex">
          <view
            v-for="(item, index) in selectList"
            :key="index"
            class="virtual-list-item"
            @click="clearCloth(index)"
          >
            <view class="tui-grid-icon">
              <image :src="item.url"></image>
            </view>
            <view class="tui-grid-label">{{ item.label }}</view>
          </view>
        </view>
      </scroll-view>
      <view class="btn-box">
        <u-button @click="tryOn" type="success" :ripple="true">试穿</u-button>
      </view>
    </view>
    <!--展示所有的图片-->
    <u-grid :border="false" col="4">
      <u-grid-item
        v-for="(item, index) in clothList"
        @click="showCloth(index)"
        backgroundColor="transparent"
        :key="index"
      >
        <view class="item-cell">
          <view class="tui-grid-icon">
            <image :src="item.cloth_image"></image>
          </view>
          <view class="tui-grid-label">{{ item.cloth_name }}</view>
        </view>
      </u-grid-item>
    </u-grid>
    <!--展示用户的虚拟形象-->
    <u-popup v-model="showVirtualImage" mode="bottom" border-radius="40">
      <view class="virtual-image-title">请选择你的虚拟形象:</view>
      <scroll-view scroll-x="true">
        <view class="virtual-image-box">
          <block v-for="(item, index) in virtualImageList" :key="index">
            <image
              :src="item.image"
              @click="getCurrentImage(item)"
              style="display: inline-block"
              mode="widthFix"
            ></image>
          </block>
        </view>
      </scroll-view>
    </u-popup>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      showVirtualImage: true,
      vitualWidth: 1000,
      showPicker: false,
      sizeIndex: 0,
      heightIndex: 0,
      waistIndex: 0,
      colorIndex: 0,
      userHeight: 0,
      waistLine: 0,
      rangeList: [],
      showSwitchBar: true,
      clothList: [],
      colorList: [],
      heightList: [],
      waistList: [],
      sizeList: [],
      selectList: [],
      current: '', //当前修改的数据
      navBackground: app.globalData.navBackground,
      resultUrl: '',
      virtualImageList: [],
      boyClothList: [],
      girlClothList: [],
      currentGender: 1,
      currentClothIndex: -1,
    };
  },
  onLoad() {
    uni.showLoading({
      title: '加载中...',
    });
    uni.request({
      url: app.globalData.baseUrl + '/virtual/getList',
      success: (res) => {
        let result = res.data;
        if (!result.code) {
          this.virtualImageList = result.list;
          uni.hideLoading();
        } else {
          uni.hideLoading();
          app.showToast(res.data.msg);
        }
      },
    });
  },
  methods: {
    getVirtualList(gender) {
      uni.request({
        url: app.globalData.baseUrl + '/cloth/getVirtualList',
        data: {
          gender: gender,
        },
        success: (res) => {
          if (gender % 2 == 0) {
            this.girlClothList = res.data;
            this.clothList = res.data;
          } else {
            this.boyClothList = res.data;
            this.clothList = this.boyClothList;
          }
          let result = res.data;
          if (!result.code) {
            if (gender % 2) {
              this.boyClothList = result.clothList;
              this.clothList = result.clothList;
            } else {
              this.girlClothList = result.clothList;
              this.clothList = result.clothList;
            }
          } else {
            app.showToast(res.data.msg);
          }
        },
      });
    },
    clearCloth(index) {
      this.selectList.splice(index, 1);
    },
    addToList() {
      let target = new Object();
      if (this.currentGender % 2) {
        target = this.boyClothList[this.currentClothIndex];
      } else {
        target = this.girlClothList[this.currentClothIndex];
      }
      for (let i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].cloth_id == target.cloth_id) {
          app.showToast('已在列表中哦~');
          return;
        }
      }
      this.selectList.push({
        url: target.cloth_image,
        label: target.cloth_name,
        cloth_id: target.cloth_id,
      });
    },
    getCurrentImage(res) {
      this.currentGender = res.gender;
      if (res.gender % 2) {
        if (!this.boyClothList.length) {
          this.getVirtualList(1);
        } else {
          this.clothList = JSON.parse(JSON.stringify(this.boyClothList));
        }
      } else {
        if (!this.girlClothList.length) {
          this.getVirtualList(2);
        } else {
          this.clothList = JSON.parse(JSON.stringify(this.girlClothList));
        }
      }
      //读取形象自带属性
      this.showVirtualImage = false;
      this.resultUrl = res.image;
      this.waistIndex = res.waist;
      this.heightIndex = res.height;
      this.selectList = [];
    },
    clearAllCloth() {
      this.selectList = [];
    },
    showCloth(index) {
      this.currentClothIndex = index;
      this.showSwitchBar = false;
      if (this.currentGender % 2) {
        //男
        this.resultUrl = this.boyClothList[index].cloth_image;
        this.colorList = JSON.parse(this.boyClothList[index].cloth_colorList);
        this.heightList = JSON.parse(this.boyClothList[index].cloth_heightList);
        this.waistList = JSON.parse(this.boyClothList[index].cloth_waistList);
        console.log('输出数据：', this.waistList);
        this.sizeList = JSON.parse(this.boyClothList[index].cloth_sizeList);
        this.adaptSize();
      } else {
        //女
        this.resultUrl = this.girlClothList[index].cloth_image;
        this.colorList = JSON.parse(this.girlClothList[index].cloth_colorList);
        this.heightList = JSON.parse(
          this.girlClothList[index].cloth_heightList
        );
        this.waistList = JSON.parse(this.girlClothList[index].cloth_waistList);
        this.sizeList = JSON.parse(this.girlClothList[index].cloth_sizeList);
        this.adaptSize();
      }
    },
    initParams() {
      this.sizeIndex = 0;
      this.colorIndex = 0;
      this.waistIndex = 0;
      this.heightIndex = 0;
    },
    switchImage() {
      this.showVirtualImage = true;
    },
    tryOn() {
      if (!this.selectList.length) {
        app.showToast('你还没有添加衣服哦~');
        return;
      }
      uni.showLoading({
        title: '加载中...',
      });
      let list = [];
      for (let i = 0; i < this.selectList.length; i++) {
        list.push(this.selectList[i].cloth_id);
      }
      uni.request({
        url: app.globalData.baseUrl + '/cloth/tryOn',
        data: {
          clothList: JSON.stringify(list),
          gender: this.currentGender,
        },
        success: (res) => {
          let result = res.data;
          if (!res.code) {
            uni.hideLoading();
            this.resultUrl = result.image;
          } else {
            app.showToast(res.data.msg);
          }
        },
      });
      this.showSwitchBar = true;
    },
    adaptSize() {
      this.sizeIndex =
        parseInt((this.waistIndex + this.heightIndex) / 2) <
        this.sizeList.length
          ? parseInt((this.waistIndex + this.heightIndex) / 2)
          : this.sizeList.length - 1;
    },
    showHeightPicker() {
      if (!this.resultUrl) {
        app.showToast('请先选择虚拟形象哦~');
        return;
      }
      if (
        this.resultUrl.indexOf('male') != -1 ||
        this.resultUrl.indexOf('female') != -1
      ) {
        app.showToast('你还没有添加衣服哦~');
        return;
      }
      this.rangeList = this.heightList;
      this.current = 'height';
      this.showPicker = true;
    },
    showWaistPicker() {
      if (!this.resultUrl) {
        app.showToast('请先选择虚拟形象哦~');
        return;
      }
      if (
        this.resultUrl.indexOf('male') != -1 ||
        this.resultUrl.indexOf('female') != -1
      ) {
        app.showToast('你还没有添加衣服哦~');
        return;
      }
      this.rangeList = this.waistList;
      this.current = 'waist';
      this.showPicker = true;
    },
    showColorPicker() {
      if (!this.resultUrl) {
        app.showToast('请先选择虚拟形象哦~');
        return;
      }
      if (
        this.resultUrl.indexOf('male') != -1 ||
        this.resultUrl.indexOf('female') != -1
      ) {
        app.showToast('你还没有添加衣服哦~');
        return;
      }
      this.rangeList = this.colorList;
      this.current = 'color';
      this.showPicker = true;
    },
    changeSize(res) {
      switch (this.current) {
        case 'waist':
          this.waistIndex = res[0];
          this.adaptSize();
          break;
        case 'color':
          this.colorIndex = res[0];
          break;
        case 'height':
          this.heightIndex = res[0];
          this.adaptSize();
          break;
        default:
          console.log('种类出错:', res);
      }
    },
  },
};
</script>

<style>
scroll-view {
  width: 100%;
  white-space: nowrap;
}

.show-box {
  display: flex;
  justify-content: space-between;
  border-bottom: 4rpx #afc4fc solid;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.params-tips {
  color: #bbb5b5;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
}

.left-box {
  width: 60%;
}

.user-kind {
  display: flex;
  justify-content: flex-start;
  margin-top: 20rpx;
}

.img-label {
  width: 50rpx;
  height: 100rpx;
  margin-left: 20rpx;
}

.cloth-params {
  width: 40%;
  border-left: 2px #afc4fc solid;
  padding: 10rpx 20rpx;
}

.show-content {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
  position: relative;
}

.img-result {
  width: 80%;
}

.params-title {
  text-align: center;
  font-weight: bold;
  color: #c5c4fc;
}

.btn-box {
  margin-top: 40rpx;
}

.input-box {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  margin-top: 20rpx;
  line-height: 60rpx;
}

.input-box > view {
  width: 120rpx;
  color: #acc3fb;
}

.tui-grid-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tui-grid-icon image {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
}

.switch-box {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 60px;
  background-color: #8a8ef724;
}

.icon-switch {
  display: flex;
  justify-content: center;
}

.switch-tips {
  font-size: 24rpx;
  color: #bfb8b8;
  text-align: center;
}

.virtual-image-box {
  width: 100%;
}

.virtual-image-box > image {
  width: 360rpx;
  margin: 0px 20rpx;
}
.virtual-list-title-box {
  display: flex;
  justify-content: space-between;
}
.virtual-image-title {
  text-align: center;
  font-weight: bold;
  height: 80rpx;
  line-height: 80rpx;
}

.virtual-list-box {
  padding: 20rpx;
}

.virtual-list-title {
  font-weight: bold;
  padding-left: 20rpx;
  margin: 20rpx 0px;
}

.virtual-list-item {
  width: 200rpx;
  text-align: center;
  margin: 0px 20rpx;
}
</style>
